<template>
    <MyHooks></MyHooks>
    <LiveCycle v-if="isShow"></LiveCycle>
    <Props></Props>
    <TS></TS>
    <ElemRef></ElemRef>
    <WatchEffect></WatchEffect>
    <Watch></Watch>
    <Computed></Computed>
    <Person></Person>
</template>
<!-- Vue3写法: -->
<script lang="ts" setup name="AppVue3Basic">
import Person from './components/Person.vue'
import Computed from './components/Computed.vue'
import Watch from './components/Watch.vue'
import WatchEffect from './components/WatchEffect.vue'
import ElemRef from './components/ElemRef.vue'
import TS from './components/TS.vue'
import Props from './components/Props.vue'
import LiveCycle from './components/LiveCycle.vue'
import MyHooks from './components/MyHooks.vue'


import { ref, onBeforeMount, onMounted } from 'vue'
let isShow = ref(true)

// 挂载
onBeforeMount(() => {
    console.log('App挂载前')
})

onMounted(() => {
    console.log('App挂载完毕')
})

</script>

<!-- Vue2写法: -->
<!-- 
<script lang="ts">
import Person from './components/Person.vue'
import Computed from './components/Computed.vue'
import Watch from './components/Watch.vue'
import WatchEffect from './components/WatchEffect.vue'
import ElemRef from './components/ElemRef.vue';

export default {
    name: 'App',
    components: {
        Person,
        Computed,
        Watch,
        WatchEffect,
        ElemRef,
    }
}
</script> 
-->

<style></style>